<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo menu"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
  >
    <el-menu-item index="1" @click="sp.num=0">
      <span v-if="sp.num!==0">
        回首页
        <el-icon class="is-loading" style="color: green"><Help /></el-icon>
      </span>
      <span v-if="sp.num===0">TeCool</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>我的题库</template>
      <el-menu-item index="2-1">事业单位笔试</el-menu-item>
      <el-menu-item index="2-2">事业单位面试</el-menu-item>
      <el-menu-item index="2-3">公共基础知识</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>考研</template>
        <el-menu-item index="2-4-1">英语</el-menu-item>
        <el-menu-item index="2-4-2">数学</el-menu-item>
        <el-menu-item index="2-4-3">政治</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <div class="flex-grow" />
    <el-sub-menu index="3">
      <template #title>更多</template>
      <el-menu-item index="3-1"><el-icon class="is-loading"><HelpFilled /></el-icon>同步中</el-menu-item>
      <el-menu-item index="3-2"><el-icon><BellFilled /></el-icon><a href="http://www.baidu.com" target="_blank" style="text-decoration: none;color: black">反馈</a></el-menu-item>
      <el-menu-item index="3-3" @click="showMsg"><el-icon><WarningFilled /></el-icon>关于</el-menu-item>
      <el-menu-item index="3-4"><el-icon><Setting /></el-icon>设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <div class="h-6" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import showPageStore from "../store/showPageStore";

const sp = showPageStore()
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const showMsg = () => {
  const about = "版本：0.0.1\n更新日期：2023.10.01\n联系作者：renjie.air@qq.com"
  myApi.alert(about,'info')
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.sp{
  font-size: xx-small;
}
.menu{
  height: 4vh;
}
</style>